<template>
  <scroll-view class="b-tabs-conter" :scroll-x="scroll"
    :style="`height:${$u.addUnit(height)}rpx;background:${background}`">
    <view class="b-tabs-head" :class="[u_indexs == indexs ? 'active' : '']"
      :style="`line-height:${height - 5}rpx;width:${width}%;font-size:${fontSize}rpx`" @click="onTab(item, indexs)"
      v-for="item, indexs in list" :key="indexs">
      <!-- { 'line-height': height - 5 + 'rpx;width:' + width + '%' } -->
      <text> {{ item.name }}</text>
    </view>
  </scroll-view>
</template>
<script lang="ts" setup>
/**
 @param {
   scroll  bool 是否开启滑动
   list  any   数据类型
   current number | string  当前选中的下标
   height number | string  容器高度
   width number | string  容器宽度百分比格式 
   background string 背景颜色
   fontSize number | string  字体大小rpx
 }
 */
import { ref, toRefs, watch } from 'vue';
export interface Props {
  scroll?: boolean,
  list?: any,
  current?: number | string,
  height?: number | string,
  width?: number | string,
  background?: string,
  fontSize?: number | string
}
const props = withDefaults(defineProps<Props>(), {
  scroll: false,
  list: [{ name: 'b-tabs1' }, { name: 'b-tabs2' }],
  current: 0,
  height: 80,
  width: 25,
  background: '',
  fontSize: 32
})
const emit = defineEmits({})
const u_indexs = ref<number | string>(0)
const { current } = toRefs(props)
watch(current, (val) => {
  u_indexs.value = val
},{deep:true,immediate:true})
function onTab(node, indexs) {
  if (u_indexs.value === indexs) return //防止相同的重复点击
  u_indexs.value = indexs
  emit('change', indexs, node)
}
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
  